<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title>有票通知</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/iCheck/custom.css}"  rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header" id="app" >
    <div class="col-sm-12">
        <div>
            <div class="ibox-content">
                <form role="form" class="form-inline">

                    <div class="form-group">
                        <label for="start" class="sr-only">始发地</label>
                        <input v-model="start" type="text" placeholder="请输入始发地" id="start" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="end" class="sr-only">终点站</label>
                        <input v-model="end" type="text" placeholder="请输入终点站" id="end" class="form-control">
                    </div>

                    <!-- <div class="form-group">

                         <label for="date" class="sr-only">出发时间</label>
                         <input type="password" placeholder="请输入出发时间" id="date" class="form-control">
                     </div>-->


                    <!--<div class="form-group">
                        <label for="date" class="sr-only">出发时间</label>
                        <div class="col-sm-10">
                            <input v-model="time" id="date" placeholder="请输入出发时间" class="laydate-icon form-control layer-date">
                        </div>
                    </div>-->
                    <div class="form-group">

                        <div class="col-sm-10">
                            <label for="time" class="sr-only">出发时间</label>
                            <input v-model="time" id="time" class="form-control layer-date" placeholder="请输入出发时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">

                        </div>
                    </div>

                    <button class="btn btn-white"  v-on:click="getInfo"  type="button">查找</button>
                   <!-- <button type="button" v-on:click="greet">Greet</button>-->
                </form>
            </div>
        </div>
        <hr>
    </div>
    <div class="col-sm-12" >
        <table class="table table-condensed">
            <caption>精简表格布局</caption>

            <thead>
            <tr>
                <th>车次</th>
                <th>类型</th>
                <th>始发地</th>
                <th>目的地</th>
                <th>出发时间</th>
                <th>到达时间</th>
                <th>历时</th>
                <th>商务座</th>
                <th>一等座</th>
                <th>二等座</th>
                <th>高级软卧</th>
                <th>软卧</th>
                <th>硬卧</th>
                <th>软座	</th>
                <th>硬座	</th>
                <th>无座</th>
                <th>备注</th>

            </tr>
            </thead>
            <tbody>
           <!-- <tr v-for="(item,index) in info">
                <td>{{index}}</td>
            </tr>-->
            <tr v-for="item in info" >
                <td>{{item.trainnumber}}</td>
                <td>{{item.tickettype}}</td>
                <td>{{item.start}}</td>
                <td>{{item.end}}</td>
                <td>{{item.starttime}}</td>
                <td>{{item.endtime}}</td>
                <td>{{item.usetime}}</td>
                <td>{{item.businessblock}}</td>
                <td>{{item.firstclassseat}}</td>
                <td>{{item.secondclassseat}}</td>
                <td>{{item.highgradesoftberth}}</td>
                <td>{{item.ordinarysoftsleeper}}</td>
                <td>{{item.hardsleeper}}</td>
                <td>{{item.softseats}}</td>
                <td>{{item.hardseat}}</td>
                <td>{{item.noseat}}</td>
                <td>
                    <button type="button"  @click="modelValues(item.tickettype,item.start,item.end,item.starttime,item.trainnumber)"  class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
                        预定
                    </button>

                    <!--<button type="button" class="btn btn-success">预定</button>-->
                </td>
            </tr>

            </tbody>
        </table>
        <div class="modal inmodal" id="myModal2" tabindex="1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated flipInY">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">
                        <!--    {{item.start}}
                            {{item.end}}-->
                            <!--{{title}}-->
                        </h4>
                        <h4 class="typrT">

                        </h4>
                        <small class="font-bold">

                        </small>
                    </div>
                    <div class="modal-body " id="chenkedK" style="display: none">
                        <div class="col-sm-10 huoche">
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="1">软卧</label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="2">硬卧</label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="3">硬座</label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="4">站票</label>
                        </div>
                        </div>
                        <div class="modal-body " id="chenkedG" style="display: none">
                        <div class="col-sm-10 huoche">
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="5">商务座</label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="6">一等座</label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" name="selectT" value="7">二等座</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button type="button" onclick="submitT()" class="btn btn-primary">保存s</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="wrapper wrapper-content"></div>
<script id="welcome-template" type="text/x-handlebars-template"></script>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<!-- 自定义js -->
<script src="/js/content.js"></script>

<!-- layerDate plugin javascript -->
<script src="/js/plugins/layer/laydate/laydate.js"></script>

<!-- iCheck -->
<script src="/js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>
<!--layui-->
<!--<script src="/layui/layui.all.js"></script>-->


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    /*function modelValues(start) {
        alert(start)
    }*/


   /* var app = new Vue({
        el: '#app',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })*/
</script>
<!--layui-->
<script>


        var vm = new Vue({
            el:'#app',
            data:{
                start:"",
                end:"",
                time:"",
                info:[],
                title:"",
                startT:"",
                endT:"",
                timeT:"",
                trainnumberT:"",
                tickettype:""

            },

            methods:{
                getInfo:function(){
                    var _this=this;
                    this.time=$("#time").val()
                    axios.get('http://localhost:8080/ticketGrabbingController/testInfo', {
                        params: {
                            start:this.start,
                            end:this.end,
                            time:this.time
                        }
                    })
                        .then(function (response) {
                            _this.info=response.data.data
                            console.log(_this.info);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                modelValues:function (tickettype,start,end,starttime,trainnumber) {
                    this.startT=start
                    this.endT=end
                    this.startT=start
                    this.tickettype=tickettype
                    this.trainnumberT=trainnumber
                    this.title="<span id='startT'>"+start+"</span>";
                    this.title+="<i class=\"fa fa-long-arrow-right\" aria-hidden=\"true\"></i>";
                    this.title+="<span id='endT'>"+end+"</span>"
                    //this.title+="<input id='tickettypeT' type='hidden' value='"+tickettype+"'>"
                    document.querySelector(".modal-title").innerHTML=this.title
                    document.querySelector(".font-bold").innerHTML="<span id='timeT'>"+this.time+"</span>"+","+starttime

                    document.querySelector(".typrT").innerHTML="<span id='tickettypeT'>"+tickettype+"</span>"+"("+"<span id='trainnumberT'>"+trainnumber+"</span>"+")"
                    document.querySelector("#chenkedK").style.display="none";
                    document.querySelector("#chenkedG").style.display="none";
                    if(tickettype=="火车票"){
                        document.querySelector("#chenkedK").style.display="block";

                    }
                    else if(tickettype=="高铁票"){
                        document.querySelector("#chenkedG").style.display="block";
                    }
                },
                submitT:function () {

                }
            }
        });





/*    $(function(){
// 也可以通过 params 对象传递参数
        axios.get('http://localhost:8080/ticketGrabbingController/testInfo', {
            params: {
                ID: 12345
            }
           })
            .then(function (response) {
                alert()
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });




})*/

</script>

<script>

    function submitT() {
       var selectTs = document.querySelectorAll("input[name='selectT']:checked")
        var strs="";
        for(var i=0;i<selectTs.length;i++){
            strs+=selectTs[i].value+","
        }

        axios.get('http://localhost:8080/ticketGrabbingController/bookTicket', {


            params: {
                start:document.querySelector("#startT").innerHTML,
                end:document.querySelector("#endT").innerHTML,
                time:document.querySelector("#timeT").innerHTML,
                trainnumber:document.querySelector("#trainnumberT").innerHTML,
                tickettype:document.querySelector("#tickettypeT").innerHTML,
                selectTs:strs
            }
        })
            .then(function (response) {
                _this.info=response.data.data
                console.log(_this.info);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

</script>

</body>

</html>
